<template>
  <div style="width: 860px; height: 400px" id="main" ref="chart" />
</template>
<script>
const echarts = require("echarts");
import { chart, current } from "../api/login/reporttitle";

export default {
  props: [
    "parentC5",
    "parentC15",
    "parentC14",
    "parentC8",
    "parentC6",
    "parentC7",
    "datax",
    "datay",
    "datac",
    "dataz",
  ],
  data() {
    return {
      option: {},
      sonC5: 0,
      sonC15: 0,
      sonC14: 0,
      sonC8: 0,
      sonC6: 0,
      sonC7: 0,
      img: "",
      result: [],
      current: [],
    };
  },
  mounted() {
    this.initCharts();
  },
  watch: {
    parentC6(newVal, oldVal) {
      console.log("新的", newVal);
      this.initCharts(newVal);
    },
    parentC7(newVal, oldVal) {
      console.log("新的", newVal);
      this.initCharts(newVal);
    },
  },
  methods: {
    initCharts() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      this.sonC6 = this.parentC6;
      console.log("最新的", this.sonC6);
      this.sonC7 = this.parentC7;
      this.sonC8 = this.parentC8;
      this.sonC15 = this.parentC15;
      this.sonC14 = this.parentC14;

      const colors = ["#5470C6", "#CCCCCC", "#80FFA5", "#f56c6c"];
      const sonC5 = this.parentC5;
      const arr = [];
      this.datac.forEach((element) => {
        if (element == this.sonC14) {
          arr.push(this.sonC14);
        } else {
          arr.push(undefined);
        }
      });
      option = {
        color: colors,
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross",
          },
        },
        title: [
          {
            // text: `单台处理水量:${sonC5}m³/h`,
            top: "-4",
            textStyle: {
              //文字颜色
              color: "#555",
              //字体风格,'normal','italic','oblique'
              fontStyle: "normal",
              //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
              fontWeight: "bold",
              //字体系列
              fontFamily: "sans-serif",
              //字体大小
              fontSize: 14,
            },
          },

          {
            text: `\n\n\n\n冷却能力(m³/h)`,
            left: "left",
            left: "-5",
            top: "-4",

            textStyle: {
              //文字颜色
              color: "#555",
              //字体风格,'normal','italic','oblique'
              fontStyle: "normal",
              //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
              fontWeight: "bold",
              //字体系列
              fontFamily: "sans-serif",
              //字体大小
              fontSize: 12,
            },
          },
          {
            text: `湿球温度(°C)`,
            left: "right",
            top: "bottom",
            top: "350",
            left: "91%",
            textStyle: {
              //文字颜色
              color: "#555",
              //字体风格,'normal','italic','oblique'
              fontStyle: "normal",
              //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
              fontWeight: "bold",
              //字体系列
              fontFamily: "sans-serif",
              //字体大小
              fontSize: 12,
            },
          },
          // {
          //   text: `出水温度(°C)`,
          //   left: "right",
          //   top: "top",
          //   top: "40",
          //   left: "88%",
          //   textStyle: {
          //     //文字颜色
          //     color: "#555",
          //     //字体风格,'normal','italic','oblique'
          //     fontStyle: "normal",
          //     //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
          //     fontWeight: "bold",
          //     //字体系列
          //     fontFamily: "sans-serif",
          //     //字体大小
          //     fontSize: 12,
          //   },
          // },
        ],
        legend: {
          orient: "horizontal",
          top: "20",
          x: "center",
          y: "bottom",
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        tooltip: {
          trigger: "axis",
          confine: true,
        },

        xAxis: [
          {
            type: "category",
            axisLabel: {
              interval: 0,
            },
            // x轴刻度数据对齐
            axisTick: {
              alignWithLabel: true,
            },
            // 解决纵向网格线不对齐x轴
            boundaryGap: false,
            // 显示纵向网格线
            splitLine: {
              onZero: false,
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            // prettier-ignore
            data:this.datax,
            connectNulls: true,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#5470C6",
              },
            },
          },
          {
            type: "value",
            // 设置最大最小值，双y轴对齐
            min: 0,
            splitNumber: 5,
            interval: Math.ceil(Math.ceil(Math.max(...this.dataz)) / 5),
            //max: Math.ceil(Math.ceil(Math.max(...this.dataz)) / 5) * 5,
            max: Math.max(...this.dataz) + 10,
            axisLine: {
              lineStyle: {
                color: "#f56c6c",
              },
            },
          },
        ],
        series: [
          {
            // name: `进出水温度：${this.sonC6}-${this.sonC7}°C`,
            type: "line",
            // 设置最大最小值，双y轴对齐
            min: 0,
            splitNumber: 5,
            interval: Math.ceil(Math.ceil(Math.max(...this.datac)) / 5),
            max: Math.ceil(Math.ceil(Math.max(...this.datac)) / 5) * 5,
            showSymbol: false,
            showAllSymbol: false,
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: this.datac,

            animation: false,
          },

          {
            // name: "参考值: 37-32°C/28",
            type: "line",
            smooth: true,
            showSymbol: false,
            showAllSymbol: false,
            emphasis: {
              focus: "series",
            },
            data: this.datay,
            animation: false,
          },
          {
            // name: `湿球温度：${this.sonC8}°C`,
            type: "line",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: arr,
            animation: false,
          },
          // {
          //   name: `出水温度°C`,
          //   type: "line",
          //   showSymbol: false,
          //   showAllSymbol: false,
          //   smooth: true,
          //   yAxisIndex: 1,
          //   data: this.dataz,
          //   animation: false,
          // },
        ],
      };

      option && myChart.setOption(option);

      var opts = {
        type: "png", // 导出的格式，可选 png, jpeg
        pixelRatio: 2, // 导出的图片分辨率比例，默认为 1。
        backgroundColor: "#fff", // 导出的图片背景色，默认使用 option 里的 backgroundColor
      };

      var img = myChart.getDataURL(opts); //拿到base64 地址，就好下载了。
      this.$emit("imgs", img);
      // console.log(img);
    },
  },
};
</script>
